<template>
    <!-- 查看路口弹窗 -->
    <div>
        <el-dialog
            title="实时状态"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            center
        >
            <el-table :data="intersectionData" style="width: 100%" border center>
                <el-table-column label="信号灯编号" align="center" prop="lightCode"></el-table-column>
                <el-table-column label="路口名称" align="center" prop="intersectionName"></el-table-column>
                <el-table-column label="信号灯颜色" align="center" prop="lightColor"></el-table-column>
                <el-table-column label="剩余时长(s)" align="center" prop="remainingTime"></el-table-column>
                <el-table-column label="记录时间" align="center" prop="recordTime"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>

    import { getTmRealTimeTrafficLight } from '@/api/tm-road'

    export default {
        data(){
            return {
                dialogVisible: false,
                intersectionData: [{}]
            }
        },
        methods: {
            open(lightId){
                this.dialogVisible = true
                this.getIntersectionData(lightId)
            },
            handleClose(){
                this.dialogVisible = false
            },
            async getIntersectionData(lightId){
                const { code = undefined, items = [] } = await getTmRealTimeTrafficLight({ 
                    pageNum: 1, 
                    pageSize: 100,
                    lightId 
                 }) 
                if(code === 200){
                    this.intersectionData = items.records
                }
                
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>